import React, { startTransition, useState, useEffect } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar, List, Toast, Button } from 'antd-mobile';
import "../css/editphone.css"
import axios from 'axios';
export default function Editphone() {
  const navigate = useNavigate()
  const location = useLocation()
  const { user } = location.state
  const [yzm, setYzm] = useState('')
  const [newphone, setNewphone] = useState('')

  const right = (
    <div style={{ fontSize: 24 }}>
      <span style={{ color: '#c1ab96', fontSize: '1.5rem' }} onClick={() => {
        axios.put('/cxb/editphone',{_id:user._id,phone:newphone}).then(res=>{
          if(res.data.code===200){
            sessionStorage.clear()
            Toast.show({
              content: '修改成功,请重新登录！'
            })
            startTransition(() => {
              navigate('/')
            })
          }
        })
      }}>保存</span>
    </div>
  )
  const back = () => {
    startTransition(() => {
      navigate('/setting')
    })
  }
  let yan = () => {
    axios.post('http://localhost:3000/yzk/get_sms', { phone: user.phone }).then(res => {
      Toast.show({
        icon: 'success',
        content: '发送成功',
      })
    })
  }
  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#fff' }}>
      <div className='cxb_editphone_navbar'>
        <NavBar onBack={back} right={right}>手机号修改</NavBar>
      </div>
      <div className="cxb_addaddress_content">
        <li>
          <label>原手机号</label>
          <input type='text' placeholder='请填写收货人姓名' value={user.phone} disabled></input>
          <button onClick={() => yan()} style={{ border: 0, background: 'none', color: '#c1ab96' }}>发送验证码</button>
        </li>
        <li>
          <label>验证码</label>
          <input type='text' placeholder='请填写6位验证码' value={yzm} onChange={e => setYzm(e.target.value)}></input>
        </li>
        <li>
          <label>新手机号</label>
          <input type='text' value={newphone} onChange={e => setNewphone(e.target.value)}></input>
        </li>
      </div>
    </div>
  )
}
